<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

</head>
<body>
        <!-- 这个div是导航栏 -->
        <div class="nav">
            <img src="image/logo.png" alt="">
            <!-- 加一个类，方便调整样式 -->
            <span>我的博客系统</span> 
            <!-- 空白元素，用来占位置 -->
            <div class="spacer"></div>
            <a href="blog_list.html">主页</a>
            <a href="blog_add.html">写博客</a>
            <a href="login.html">登录</a>
        </div>
        <!-- 包裹整个博客编辑页内容的顶级容器 -->
        <div class="blog-edit-container">
            <div class="title">
                <input id="title" type="text">
                <button onclick="mysub()">确认修改</button>
            </div>
            <!-- 放置 md 编辑器 -->
            <div id="editorDiv">
                <textarea style="display:none;" id="editorText"></textarea>
            </div>
        </div>
        <script>
            // 获取当前 url 中某个参数的方法
            function getURLParam(key) {
                var params = location.search;
                if(params.indexOf("?") >= 0) {
                    params = params.substring(1);
                    var paramArr = params.split('&');
                    for(var i = 0; i < paramArr.length; i++) {
                        var namevalues = paramArr[i].split("=");
                        if(namevalues[0] == key) {
                            return namevalues[1];
                        }
                    }
                } else {
                    return "";
                }
            }
            var aid = getURLParam("aid");
            if(aid != null && aid > 0) { // 参数有效
                // 1.先判断登陆状态
                jQuery.ajax({
                    url:"loginuserinfo",
                    type:"GET",
                    success:function(result) {
                        if(result != null && result.succ == 200) {
                            // 前后端交互正常
                            if(result.data != null && result.data.uid > 0) {
                                // 登陆是正常
                            } else{
                                alert("抱歉，请先登录！");
                                location.href = "login.html";
                            }
                        }else {
                            alert("抱歉，后端程序不可用，请您稍后再试！");
                        }
                    }
                });
                // 2.根据 aid 获取文章信息
                jQuery.ajax({
                    url:"artdetail",
                    type:"POST",
                    data:{"aid":aid},
                    success:function(result) {
                        if(result != null && result.succ == 200 &&
                        result.data != null && result.data.aid > 0) {
                            jQuery("#title").val(result.data.titie);
                            initEdit(result.data.titie);
                            initEdit(result.data.context);
                        } else {
                            alert("数据加载失败，请重试！");
                        }
                    }
                });
            }
            var editor;
            function initEdit(md) {
                // 编辑器设置
                editor = editormd("editorDiv",{
                    // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
                width: "100%",
                // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
                height: "calc(100% - 50px)",
                // 编辑器中的初始内容
                markdown: md,
                // 指定 editor.md 依赖的插件路径
                path: "editor.md/lib/",
                saveHTMLToTextarea: true // 
                });
            }
            initEdit("# 在这里写下一篇博客");
            // 提交
            function mysub() {
                var titie = jQuery("#title");
                var context = jQuery("#editorText");
                // 1.非空效验
                if(jQuery.trim(titie.val()) == "") {
                    alert("请先输入标题！");
                    titie.focus();
                    return;
                }
                if(jQuery.trim(context.val()) == "") {
                    alert("请先输入正文！");
                    context.focus();
                    return;
                }
                // 将请求发送给后端
                jQuery.ajax({
                    url:"upart",
                    type:"POST",
                    data:{
                        "title":titie.val(),
                        "context":context.val(),
                        "aid":aid
                    },
                    success:function(result) {
                        if(result != null && result.succ == 200 && result.data == 1) {
                            alert("恭喜，修改成功！");
                            location.href = "myblog_list.html";
                        }else {
                            alert("操作失败，请重试！");
                        }
                    }
                });
            }

        //     // 初始化编辑器
        //     // 库里提供的函数，构造一个 editor 对象,这个对象就代表一个 md 编辑器
        //     // 返回值就是 md 编辑器对象
        //     // 通过一个 id 来关联上一个 html 标签，md 编辑器就会出现在这个标签里
        //     let editor = editormd("editor", {
        //     // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
        //     width: "100%",
        //     // 设定编辑器高度
        //     height: "calc(100% - 50px)",
        //     // 编辑器中的初始内容
        //     markdown: "# 在这里写下一篇博客",
        //     // 指定 editor.md 依赖的插件路径
        //     path: "editor.md/lib/"
        // }); // 第二个参数是一个 js 对象，包含了一些具体选项
        </script>
</body>
</html>